@offset: 24px;

.move-from-left-fade-enter-active {
  position: relative;
  transition:
    opacity 0.3s ease,
    right 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.move-from-left-fade-leave-active {
  position: absolute;
  transition:
    opacity 0.3s ease,
    right 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.move-from-left-fade-enter-from {
  right: @offset;
  opacity: 0;
}

.move-from-left-fade-leave-to {
  right: -@offset;
  opacity: 0;
}

.move-from-left-fade-enter-to,
.move-from-left-fade-leave-from {
  right: 0;
  opacity: 1;
}

.move-from-right-fade-enter-active {
  position: relative;
  transition:
    opacity 0.3s ease,
    left 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.move-from-right-fade-leave-active {
  position: absolute;
  transition:
    opacity 0.3s ease,
    left 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.move-from-right-fade-enter-from {
  left: @offset;
  opacity: 0;
}

.move-from-right-fade-leave-to {
  left: -@offset;
  opacity: 0;
}

.move-from-right-fade-enter-to,
.move-from-right-fade-leave-from {
  left: 0;
  opacity: 1;
}

.single-root {
  width: 100%;
  height: 100%;
}

.outer-wrapper {
  position: relative;
  height: 100%;
  max-width: 100%;
}

.inner-wrapper {
  padding: 24px;
  margin: 0 auto;
  max-width: 800px;

  :deep(.n-card) {
    background-color: transparent;
  }
}

.tool:not(:last-child) {
  margin-bottom: 8px;
}
